<template>
  <div class="right3">
    <el-table
      :data="newTableData"
      ref="tableRef"
      style="width: 100%"
      :max-height="tableH"
    >
      <el-table-column
        v-for="column in dynamicColumns"
        :key="column.prop"
        :fixed="column.fixed"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align"
        :sortable="column.sortable"
        :sort-method="column.sortMethod"
      >
        <!-- <template v-if="column.prop === 'xzq'" #default="{ row, column }">
          <span
            class="content-color"
            @click="handlePopulationClick(row, column)"
            >{{ row.xzq }}</span
          >
        </template> -->
        <template v-if="column.prop === 'town'" #default="{ row, column }">
          <span
            class="content-color"
            @click="handlePopulationClick(row, column)"
            >{{ row.town }}</span
          >
        </template>
        <template v-if="column.prop === 'village'" #default="{ row, column }">
          <span class="content-color-no-line">{{ row.village }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// const sortByPercentage = (prop) => {
//   // 通过闭包传递列属性
//   return (a, b) => {
//     const numA = parseFloat(a[prop])
//     const numB = parseFloat(b[prop])
//     return numA - numB
//   }
// }
</script>
<script setup>
import { onMounted, ref, computed, watch } from 'vue'
import { getFglData2 } from '@/api/indexNew.js'
const emits = defineEmits(['updateCurrentQu'])
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  Params: {
    type: Object,
    default: () => {},
  },
  isMapClick: {
    type: Boolean,
    default: false,
  },
})
const tableColumns = ref([
  {
    prop: 'index',
    label: '序号',
    width: '80',
    align: 'center',
  },
  {
    prop: 'town',
    label: '乡镇',
    align: 'center',
  },
  {
    prop: 'zcount',
    label: '房屋总数(栋)',
    align: 'center',
  },
  {
    prop: 'zccount',
    label: '自查总数(栋)',
    align: 'center',
  },
  {
    prop: 'jccount',
    label: '检查总数(栋)',
    align: 'center',
  },
  {
    prop: 'yhcount',
    label: '隐患总数(个)',
    align: 'center',
  },
  {
    prop: 'zgcount',
    label: '整改总数(个)',
    align: 'center',
  },
  {
    prop: 'jcl',
    label: '检查率',
    align: 'center',
    sortable: true,
  },

])
watch(
  () => props.isMapClick,
  (newValue, oldValue) => {
    // console.log('@newValue===监听', newValue)
    if (newValue) {
      tableColumns.value[1] = {
        prop: 'village',
        label: '街乡镇',
        align: 'center',
      }
    }
  },
  { deep: true, immediate: true }
)
const newTableData = ref(props.tableData)
// const tableData = ref([
//   {
//     index:1,
//     xzq: '2016-05-01',
//     zcount: 'Tom',
//     ydb: 'California',
//     dbl: '29%',
//   },
//   {
//     index:2,
//     xzq: '2016-05-01',
//     zcount: 'Tom',
//     ydb: 'California',
//     dbl: '21%',
//   },
//   // other data
// ])
const dynamicColumns = computed(() => {
    // 根据 props.Params.type 的值过滤不需要显示的列
  const filteredColumns = tableColumns.value.filter((column) => {
    if (props.Params.type === '1') {
      return column.prop !== 'jccount' && column.prop !== 'jcl'
    } else if (props.Params.type === '2') {
      return column.prop !== 'zccount' && column.prop !== 'zcl'
    } else {
      return true // 其他情况显示所有列
    }
  })
  // 返回过滤后的列，并为需要排序的列定义排序方法
  return filteredColumns.map((column) => {
    if (column.sortable) {
      return {
        ...column,
        sortMethod:
          props.Params.type === '1'
            ? sortByPercentage('zcl')
            : sortByPercentage('jcl'),
      }
    } else {
      return { ...column }
    }
  })
})
const tableH = ref('0px')
const tableRef = ref(null)

const getTableH = () => {
  setTimeout(() => {
    tableH.value = document.querySelector('.right3').offsetHeight
    return `${tableH.value}px`
  }, 200)
}
const sortByPercentage = (prop) => {
  // 通过闭包传递列属性
  return (a, b) => {
    const numA = parseFloat(a[prop])
    const numB = parseFloat(b[prop])
    return numA - numB
  }
}
const currentCode = ref('')
const allTitle = ref([])
const oneCode = ref('')
const twoCode = ref('')
const handlePopulationClick = (row, column) => {
  // 在这里编写处理“居住人口数量”列点击事件的逻辑
  console.log('Row:', row)
  if (!row.village) {
    // console.log('column:', column)
    currentCode.value = row.towndm ? row.towndm : row.xzqdm
    props.Params.code = currentCode.value
    let name = ''
    if (currentCode.value.length === 12) {
      oneCode.value = row.xzqdm
      name = row.town
    }
    //  else {
    //   twoCode.value = row.towndm
    //   name = row.town
    // }
    if (props.isMapClick) {
      oneCode.value = row.xzqdm
    }
    // console.log('@name', name)
    // console.log('@currentCode.value', currentCode.value)
    allTitle.value.push(name)
    getXzList()
  }
}
// 下钻到乡镇
const getXzList = async () => {
  let res = await getFglData2(props.Params)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    // item.zcl = Number(item.zcl)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  if (modifiedList) {
    if (currentCode.value.length === 6) {
      tableColumns.value[1] = {
        prop: 'town',
        label: '乡镇',
        align: 'center',
      }
    } else if (currentCode.value.length === 12) {
      tableColumns.value[1] = {
        prop: 'village',
        label: '街乡镇',
        align: 'center',
      }
    } else if (currentCode.value.length === 0) {
      tableColumns.value[1] = {
        prop: 'xzq',
        label: '区',
        align: 'center',
      }
    }
  }
  newTableData.value = modifiedList
  if (newTableData.value.length > 0) {
    emitCurrentQu()
  }
}
const emitCurrentQu = () => {
  // 发送自定义事件通知父组件
  emits('updateCurrentQu', allTitle.value, currentCode.value)
}
const backFn = () => {
  if (currentCode.value.length === 12) {
    props.Params.code = oneCode.value
    currentCode.value = oneCode.value
    allTitle.value.pop()
    getXzList()
  } else if (currentCode.value.length === 6) {
    props.Params.code = ''
    currentCode.value = ''
    allTitle.value = []
    getXzList()
  }
}
onMounted(() => {
  getTableH()
})

defineExpose({
  backFn,
  currentCode,
})
</script>
<style scoped lang="scss">
.right3 {
  width: 100%;
  height: 100%;
  flex: 1;
  //   border: 1px solid red;
  // 表格部分样式
  // 最外层透明
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 2.2rem;
    border-bottom: 1px solid transparent; // 去掉表格体 的 边框
  }
  /* 表格内背景颜色  */
  ::v-deep .el-table {
    th,
    tr,
    td {
      background-color: transparent;
      border: none;
      color: #93dcfe;
      font-size: 2.2rem;
      // height: 5px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      // border: 1px solid red;
      // background-color: red;
      .el-table__row {
        border: 10px solid red;
        // background-color: yellow;
      }
    }
  }
  /* // 设置表格行高度 */
  ::v-deep .el-table__body tr {
    padding: 0;
    height: 54px;
    border: 1px solid red;
  }

  /* // 修改高亮当前行颜色 */
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  /* // 取消当前行高亮 */
  //   ::v-deep .el-table tbody tr {
  //     pointer-events: none;
  //   }

  /* 修改表头样式-加边框 */
  //   ::v-deep .el-table__header-wrapper {
  //      border: solid 1px #04c2ed;
  //   }

  /* // 表格斑马自定义颜色 */
  ::v-deep .el-table__row.warning-row {
    background: #01205a;
  }

  /* 去掉表格里的padding */
  ::v-deep .el-table .cell,
  .el-table th div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.content-color {
  text-decoration: underline;
  cursor: pointer;
}
.content-color-no-line{
  text-decoration: none;
}
</style>
